﻿<!DOCTYPE html>
<!--
  oooooooo8   ooooo         ooooooooooo        o        oooooooooo
o888     88    888           888    88        888        888    888
888            888           888ooo8         8  88       888oooo88
888o     oo    888      o    888    oo      8oooo88      888  88o
 888oooo88    o888ooooo88   o888ooo8888   o88o  o888o   o888o  88o8

oooo     oooo oooooooooo  ooooo ooooooooooo ooooooooooo oooooooooo
 88   o   88   888    888  888  8   888   8  888    88   888    888
  88 888 88    888oooo88   888      888      888ooo8     888oooo88
   888 888     888  88o    888      888      888    oo   888  88o
    8   8     o888o  88o8 o888o    o888o    o888ooo8888 o888o  88o8
-->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Clear Writer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="icon.ico" type="image/x-icon" />
    <script src="./files/jquery.min.js"></script>
    <script src="./files/jquery.fullscreen.js"></script>
    <script src="./files/FileSaver.js"></script>
    <script src="./files/jquery.wordexport.js"></script>

    <link rel="stylesheet" href="./files/codemirror.css" />
    <link rel="stylesheet" href="./files/writer.css" />
    <link rel="stylesheet" href="./files/preload.css" />
    <link rel="stylesheet" href="./files/search/matchesonscrollbar.css" />
    <link rel="stylesheet" href="./files/dialog/dialog.css" />
    <link rel="stylesheet" href="./files/fold/foldgutter.css" />
    <link rel="stylesheet" href="./files/flag.css" />
    <link rel="stylesheet" href="./files/fontawesome/css/all.css" />

    <script src="./files/codemirror.js"></script>
    <script src="./files/markdown.js"></script>
    <script src="./files/gfm.js"></script>
    <script src="./files/hightlighting/javascript.js"></script>
    <script src="./files/hightlighting/css.js"></script>
    <script src="./files/hightlighting/python.js"></script>
    <script src="./files/hightlighting/php.js"></script>
    <script src="./files/hightlighting/ruby.js"></script>
    <script src="./files/hightlighting/go.js"></script>
    <script src="./files/hightlighting/clike.js"></script>
    <script src="./files/hightlighting/xml.js"></script>

    <script src="./files/overlay.js"></script>
    <script src="./files/meta.js"></script>
    <script src="./files/htmlmixed.js"></script>
    <script src="./files/search/search.js"></script>
    <script src="./files/search/match-highlighter.js"></script>
    <script src="./files/search/matchesonscrollbar.js"></script>
    <script src="./files/search/jump-to-line.js"></script>
    <script src="./files/search/searchcursor.js"></script>
    <script src="./files/fold/brace-fold.js"></script>
    <script src="./files/fold/comment-fold.js"></script>
    <script src="./files/fold/foldcode.js"></script>
    <script src="./files/fold/foldgutter.js"></script>
    <script src="./files/fold/indent-fold.js"></script>
    <script src="./files/fold/markdown-fold.js"></script>
    <script src="./files/fold/xml-fold.js"></script>
    <script src="./files/closetag.js"></script>
    <script src="./files/closebrackets.js"></script>
    <script src="./files/annotatescrollbar.js"></script>
    <script src="./files/dialog/dialog.js"></script>
    <script src="./files/active-line.js"></script>
    <script src="./files/editor.md/editormd.js"></script>
    <script src="./files/editor.md/marked.min.js"></script>
    <script src="./files/editor.md/prettify.min.js"></script>
    <script src="./files/editor.md/raphael.min.js"></script>
    <script src="./files/editor.md/underscore.min.js"></script>

    <script src="./files/language.js"></script>
    <!-- <script src="./files/github.js"></script> -->
    <!-- <script src="./files/jschardet.min.js"></script> -->

    <style id="control"></style>
    <style id="padding_control"></style>
    <style id="main_color_control">
      * {
        --main: #00baff;
      }
    </style>
    <style id="header-control"></style>
    <style id="focus-control"></style>
    <style id="advanced_control"></style>
    <style id="linenum_control"></style>
    <style id="window-background">
      html {
        background: rgba(248, 248, 248, 255);
      }
    </style>
    <style id="css_ctrl"></style>
  </head>
  <body onunload="save_content()" id="board">
    <input
      style="opacity: 0; position: fixed; left: 3000px"
      type="color"
      value="#00BAFF"
      id="real_main_color"
    />
    <div id="preload">
      <img draggable="false" alt="Loading..." id="preload_logo" src="" />
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>

    <div id="tool_bar">
      <button onclick="editor.focus(); editor.execCommand('findNext');">
        <i class="fad fa-arrow-down fa-lg"></i>
      </button>
      <button onclick="editor.focus(); editor.execCommand('findPrev');">
        <i class="fad fa-arrow-up fa-lg"></i>
      </button>
      <button onclick="editor.focus(); editor.execCommand('find');">
        <i class="fad fa-i-cursor fa-lg"></i>
      </button>
      <button
        onclick="editor.focus(); editor.execCommand('clearSearch');hideToolBar();"
      >
        <i class="fad fa-times fa-lg"></i>
      </button>
    </div>
    <div id="topbar">
      <button
        id="open"
        onclick="save_content();msgbox(CHOOSE_FILE+'...', build_list(), 35, 25, false);"
      >
        <img draggable="false" src="./files/file.svg" width="16" alt="📁" />
      </button>
      <button id="feedback" onclick="feedback()">
        <img draggable="false" src="./files/feedback.svg" width="14" alt="📃" />
      </button>
      <button id="open_settings" onclick="set_settings()">
        <img draggable="false" src="./files/setting.svg" width="15" alt="🛠" />
      </button>

      <div id="format_btns">
        <button
          id="topbar_undo"
          onclick="editor.focus(); editor.execCommand('undo');"
        >
          <i class="fad fa-undo"></i>
        </button>
        <button
          id="topbar_redo"
          onclick="editor.focus(); editor.execCommand('redo');"
        >
          <i class="fad fa-redo"></i>
        </button>
        <button
          id="topbar_bold"
          onclick="editor.focus(); editor.replaceSelection('**'+editor.getSelection()+'**');"
        >
          <i class="fad fa-bold"></i>
        </button>
        <button
          id="topbar_italic"
          onclick="editor.focus(); editor.replaceSelection('*'+editor.getSelection()+'*');"
        >
          <i class="fad fa-italic"></i>
        </button>
        <button
          id="topbar_strikethrough"
          onclick="editor.focus(); editor.replaceSelection('~~'+editor.getSelection()+'~~');"
        >
          <i class="fad fa-strikethrough"></i>
        </button>
        <button
          id="topbar_link"
          onclick="editor.focus(); editor.replaceSelection(' [' + editor.getSelection() + '](https://example.com/) '); editor.execCommand('goCharLeft'); editor.execCommand('goCharLeft');"
        >
          <i class="fad fa-link"></i>
        </button>
        <button id="find" onclick="editor.focus(); editor.execCommand('find');">
          <i class="fad fa-search"></i>
        </button>
        <button
          id="replace"
          onclick="editor.focus(); editor.execCommand('replace');"
        >
          <i class="fad fa-exchange"></i>
        </button>
        <button id="preview" onclick="previewer()">
          <i class="fad fa-eye"></i>
        </button>
        <button id="counter" onclick="count()">
          <i class="fad fa-calculator"></i>
        </button>
      </div>
      <span onclick="set_stick()" id="stick" style="cursor: pointer">📌</span>
      <div class="save">
        <a id="save_info"></a>
        <a id="save_btn" onclick="down_cur()">另存为...</a>
      </div>
    </div>
    <div id="header">
      <span id="top_file_name"></span>
      <div id="title" onclick="set_about()">Clear Writer</div>
      <div id="btns">
        <!-- <span class="cornerbtn" id="minimize"></span
        ><span class="cornerbtn" id="maxmize"></span 
        >--><span
          class="cornerbtn"
          onclick="handleFullScreen()"
          id="fullscreen"
        ></span>
        <!-- <span class="cornerbtn" id="close"></span> -->
      </div>
    </div>
    <div id="about" class="sidebar">
      <article id="about" itemprop="text"></article>
    </div>
    <div id="settings" class="sidebar">
      <i class="fad fa-tools"></i>
      <h1 id="title_of_settings">设置</h1>
      <div>
        <i class="fad fa-tshirt"></i>
        <h2 id="title_of_look">外观</h2>
        <div>
          <span id="title_of_theme">主题</span>
          <button id="theme" onclick="set_theme()">亮/暗/跟随系统</button>
        </div>
        <div>
          <span id="title_of_main_color">主题色</span>
          <button id="set_main_color">设置...</button>
        </div>
        <div>
          <span id="title_of_font">字体</span>
          <button id="font" onclick="set_font()">默认字体</button>
        </div>
        <div>
          <span id="title_of_num">行号</span>
          <button id="num" onclick="set_line_num()"></button>
        </div>
        <div>
          <span id="title_of_css">自定义 CSS</span>
          <button id="css_btn" onclick="customCSS()">编辑</button>
        </div>
      </div>
      <div>
        <i class="fad fa-language"></i>
        <h2 id="title_of_lang">语言</h2>
        <div>
          <span>语言 · 語言 · Language</span>
          <button id="lang" onclick="set_lang()">简体中文</button>
        </div>
      </div>
      <div>
        <i class="fad fa-sync"></i>
        <h2 id="backup_and_sync">备份和同步</h2>
        <div>
          <button id="import_from_file" onclick="importDataFile()">
            从文件导入数据
          </button>
          <button id="export_to_file" onclick="exportDataFile()">
            导出数据到文件
          </button>
        </div>
        <!-- <div id="sync_dashboard" class="unconnected">
          <button onclick="github.syncStart()" id="sync_start_btn">
            登录 Github
          </button>
          <div id="sync">
            <div>
              <img draggable="false" src="" id="avatar" />
              <span id="username_span"></span>
              <i
                class="fad fa-sign-out-alt"
                onclick="github.signOut()"
                id="sign_out_btn"
              ></i>
            </div>
            <button id="sync_upload" onclick="github.exportDataGist()">
              备份数据到云端
            </button>
            <button id="sync_download" onclick="github.importDataGist()">
              恢复数据到本地
            </button>
          </div>
        </div>
        <div id="gitee_sync_dashboard" class="unconnected">
          <button onclick="gitee.syncStart()" id="gitee_sync_start_btn">
            登录 Gitee
          </button>
          <div id="gitee_sync">
            <div>
              <img draggable="false" src="" id="gitee_avatar" />
              <span id="gitee_username_span"></span>
              <i
                class="fad fa-sign-out-alt"
                onclick="gitee.signOut()"
                id="gitee_sign_out_btn"
              ></i>
            </div>
            <button id="gitee_sync_upload" onclick="gitee.exportDataGist()">
              备份数据到云端
            </button>
            <button id="gitee_sync_download" onclick="gitee.importDataGist()">
              恢复数据到本地
            </button>
          </div>
        </div> -->
      </div>
      <div>
        <i class="fad fa-shield"></i>
        <h2 id="advance">高级</h2>
        <div>
          <span id="title_of_disable_animation">禁用动画</span>
          <button id="disable_animation" onclick="disable_animation()"></button>
        </div>
        <!--<div>
          <span id="title_of_dev">开发人员工具</span>
           <button id="dev_tools" onclick="set_dev_tools()">打开</button>
        </div> -->
      </div>
      <!-- <div>
        <i class="fad fa-chevron-double-up"></i>
        <h2 id="title_of_update">更新</h2>
        <span id="current_vertion"></span>
        <div>
          <button id="update" onclick="checkUpdate(true)">检查更新</button>
        </div>
      </div> -->
      <!-- <div>
        <i class="fad fa-radiation"></i>
        <h2 id="experiment">实验性功能</h2>
        <strong id="experiment-warning"
          >警告: 以下为实验性功能！启用这些选项可能导致程序崩溃或卡顿！</strong
        ><br />
        <div>
          <span id="title_of_acrylic">启用亚克力效果</span>
          <button id="acrylic" onclick="set_acrylic()"></button>
        </div>
        <div>
          <span id="title_of_opacity">窗口背景不透明度</span>
          <input
            id="opacity"
            oninput="set_opacity()"
            type="range"
            min="0"
            max="100"
            value="70"
          />
          <label id="opacity_label">70%</label>
        </div>
      </div> -->
    </div>
    <div id="ctn">
      <form method="post" target="_blank" id="save_form">
        <textarea id="code" name="code" style="display: none"></textarea>
      </form>
    </div>

    <div id="Rmenu">
      <ul>
        <li
          onclick="editor.focus(); document.execCommand('copy', false, null);"
        >
          <i class="fad fa-copy" aria-hidden="true"></i><a id="copy">复制</a
          ><span>Ctrl + C</span>
        </li>
        <li onclick="paste()">
          <i class="fad fa-paste" aria-hidden="true"></i><a id="paste">粘贴</a
          ><span>Ctrl + V</span>
        </li>
        <li onclick="editor.focus(); document.execCommand('cut', false, null);">
          <i class="fad fa-cut" aria-hidden="true"></i><a id="cut">剪切</a
          ><span>Ctrl + X</span>
        </li>

        <hr color="#888" style="opacity: 0.3" size="1" />

        <li onclick="editor.focus(); editor.execCommand('selectAll');">
          <i class="fad fa-i-cursor" aria-hidden="true"></i
          ><a id="selectall">全选</a><span>Ctrl + A</span>
        </li>
        <li onclick="editor.focus(); editor.foldCode(editor.getCursor());">
          <i class="fad fa-map" aria-hidden="true"></i><a id="fold">折叠</a
          ><span>Ctrl + Q</span>
        </li>

        <hr color="#888" style="opacity: 0.3" size="1" />

        <li
          onclick="editor.focus(); editor.replaceSelection('**'+editor.getSelection()+'**');"
        >
          <i class="fad fa-bold" aria-hidden="true"></i><a id="bold">粗体</a
          ><span>Ctrl + B</span>
        </li>
        <li
          onclick="editor.focus(); editor.replaceSelection('*'+editor.getSelection()+'*');"
        >
          <i class="fad fa-italic" aria-hidden="true"></i><a id="italic">斜体</a
          ><span>Ctrl + I</span>
        </li>
        <li
          onclick="editor.focus(); editor.replaceSelection('~~'+editor.getSelection()+'~~');"
        >
          <i class="fad fa-strikethrough" aria-hidden="true"></i
          ><a id="linethrough">删除线</a>
        </li>
        <li
          onclick="editor.focus(); editor.replaceSelection(' [' + editor.getSelection() + '](https://example.com/) '); editor.execCommand('goCharLeft'); editor.execCommand('goCharLeft');"
        >
          <i class="fad fa-link" aria-hidden="true"></i
          ><a id="hyperlink">超链接</a><span>Ctrl + K</span>
        </li>

        <hr color="#888" style="opacity: 0.3" size="1" />

        <li onclick="editor.focus(); editor.execCommand('undo');">
          <i class="fad fa-undo" aria-hidden="true"></i><a id="undo">撤销</a
          ><span>Ctrl + Z</span>
        </li>
        <li onclick="editor.focus(); editor.execCommand('redo');">
          <i class="fad fa-redo" aria-hidden="true"></i><a id="redo">重做</a
          ><span>Ctrl + Y</span>
        </li>
      </ul>
    </div>
    <div id="calculate" style="display: none"></div>
    <div id="font-manager">
      <div class="bold"><span>a</span><a>啊a</a></div>
      <span>a</span><a>啊a</a>
    </div>
  </body>
  <script src="./files/writer.js"></script>
</html>
